<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- div => 元素/标签/标记(html元素) -->
    <!-- 
        属性(html属性): 写在标签内和标签名以一个空格分隔的叫做属性(属性名="属性值")
        属性可以没有 也可以有多个 多个属性之间用空格分隔
    -->
    <div id="demo" class="one two three" title="hello"></div>
</body>
<script>

    // 获取元素节点
    var demo = document.getElementById("demo");
    console.log(demo, typeof demo);

    // 如何获取属性节点
    // 1. 属性节点 依存于元素节点 (写在标签内和标签名以一个空格分隔的叫做属性)
    // 2. 通过元素节点 对应属性名 获取属性节点
    // 3. 所有的节点 都是 对象

    // Element.getAttributeNames();  获取当前元素内的属性名的集合
    var result = demo.getAttributeNames();
    // console.log(result);

    // 1 先获取属性节点  2. 对应属性节点 取值和赋值
    // Element.getAttributeNode(attrName);  对应属性名 获取属性节点
    // var idNode = demo.getAttributeNode("id"); //获取属性
    // console.log(idNode, typeof idNode);

    // 属性节点 (属性名="属性值")
    // 取值
    // console.log(idNode.nodeName);  // 获取属性节点的属性名
    // console.log(idNode.nodeValue);  // 获取属性节点的属性名

    // 赋值(给属性值 重新赋值)
    // idNode.nodeValue = "DEMO";

    // console.log(demo);

    // Element.getAttribute(attrName)           对应属性名,获取属性值
    // Element.setAttribute(attrName,attrVal)   对应属性名,设置属性值
    // Element.removeAttribute(attrName)        对应属性名,删除该属性

    // 获取
    // var id = demo.getAttribute("id");
    // var _class = demo.getAttribute("class");
    // var title = demo.getAttribute("title");

    // console.log(id);
    // console.log(_class);
    // console.log(title);

    // 设置
    // demo.setAttribute("id", "DEMO");
    // demo.setAttribute("class", "ONE TWO Three");
    // demo.setAttribute("title", "HELLO");
    // console.log(demo);


    // 删除属性
    // demo.removeAttribute("id");
    // demo.removeAttribute("class");
    // demo.removeAttribute("title");

    // console.log(demo);





</script>

</html>